// 步骤9.1：在js文件夹下新建一个app.js文件，用于存放Vue的主应用。

// 步骤9.11：导入封装好的API请求函数
import api from './api.js';

// 步骤9.10：导入子组件
import List from './list.js';
// 步骤10 ：完成菜品列表组件
import Cart from './cart.js';
// 步骤11 ：完成购物车组件

// 步骤9.2：创建Vue组件
// 知识点: Vue组件是Vue.js应用的基本构建块。
// 知识点: Vue组件是一个Vue实例，可以接收Vue的选项对象。
// 知识点: 一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义。
// 知识点: 可以使用export default导出Vue组件。
// 知识点: Vue组件可以包含data、methods、props等选项。
// 知识点: Vue组件可以通过template选项定义模板。
export default {
  // 步骤9.10：在Vue组件的components选项中注册子组件。
  // 知识点: Vue组件可以包含其他Vue组件。
  // 注册的子组件可以在Vue组件的template选项中使用。
  // 通过import导入子组件对象。
  components: {//在这里注册主应用可以用的直属键
    List,
    Cart
  },

  // 步骤9.3：在Vue组件的template选项中定义组件的模板。
  // 知识点：Vue组件的模板是一个HTML字符串，用于定义组件的外观。
  // 知识点：HTML字符串使用反引号`包起来，而不是单双引号。
  template: `
  
  <div class="common-layout">
       <el-container>
           <el-header>
             <div class="header-content">
  


                 <div class="logo">
                 <img src="logo.png" width="100px" height="50px" alt="logo">  
                 <el-text class="mx-1">东软点餐系统</el-text>
                 </div>
                <div class="userInfo">
                        <el-dropdown v-if="isLoggedIn">
                          <span class="el-dropdown-link">
                            {{ userInfo.username }}
                          </span>
                          <template #dropdown>
                            <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item>查看个人信息</el-dropdown-item>
                              <el-dropdown-item>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                        <div v-else>
                          <el-button type="info" round class="custom-button" @click="openDialog">登录</el-button>
                        </div>
                      </div>
                  </div>
                </el-header>
                <el-container>
                <el-aside width="200px">
                    <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
                    <el-menu-item index="1">精品餐谱</el-menu-item>
                    <el-menu-item index="2">我的点餐</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <component :is="selectedMenu" :is-logged-In="isLoggedIn" :user-info="userInfo"></component>
                </el-main>
                </el-container>
            </el-container>

            <el-dialog v-model="dialogFormVisible" title="登录/注册" width="500"  class="dialog">
              <el-form :model="form"  class="dialog-form">
                <el-form-item label="账号" :label-width="formLabelWidth">
                  <el-input v-model="form.username" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input v-model="form.password" autocomplete="off" />
                </el-form-item>
              </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="handleLogin">登录</el-button>
                  <el-button type="primary" @click="handleRegister">注册</el-button>
                </div>
              </template>
            </el-dialog>
          </div>
    `,

  // 步骤9.9：在Vue组件的data选项中定义数据。
  data() {
    // isLoggedIn用于判断用户是否登录，默认为false。
    // dialogFormVisible用于判断是否显示登录对话框，默认为false。
    // selectedMenu用于存放选中的菜单项，默认为List。
    // （可选）form用于存放登录/注册表单数据。
    return {
      isLoggedIn: false,
      dialogFormVisible: false,
      selectedMenu: 'List',
      form: {
        username: '',
        password: ''
      },
      // userInfo用于存放用户信息。 
      userInfo: {
        id: 0,
        username: 'anonymous',
        password: ''
      },
    }
  },
  // 步骤9.11：在Vue组件的methods选项中定义事件处理函数。
  // handleSelect用于处理菜单项的选择。
  // handleSelect是事件select的处理函数。
  // 事件select是el-menu组件的事件。
  // 事件select的参数key是选中的菜单项el-menu-item的索引属性index。
  // 事件select的参数keyPath是选中的菜单项的路径indexPath。

  methods: {
    handleSelect(key, keyPath) {
      switch (key) {
        case '1':
          this.selectedMenu = List;
          break;
        case '2':
          this.selectedMenu = Cart;
          break;
      }
    },
    handleLogin() {
      // 处理登录逻辑
      const user = {
        username: this.form.username,
        password: this.form.password
      };

      api.loginUser(user)
        .then(response => {
          // 登录成功，处理响应
          console.log(response.data);
          user.id = response.data.data.id;
          this.userInfo = user;
          this.isLoggedIn = true;
          this.dialogFormVisible = false;
        })
        .catch(error => {
          // 登录失败，处理错误
          console.error(error);
        });
    },
    handleRegister() {
      // 处理注册逻辑
      const user = {
        username: this.form.username,
        password: this.form.password
      };

      api.registerUser(user)
        .then(response => {
          // 注册成功，处理响应
          user.id = response.data.id;
          this.userInfo = user;
          this.isLoggedIn = true;
          this.dialogFormVisible = false;
        })
        .catch(error => {
          // 注册失败，处理错误
          console.error(error);
        });
    },
    openDialog() {
      this.dialogFormVisible = true;
    },
    closeDialog() {
      this.dialogFormVisible = false;
    }
  }
};